<template>
	<view class="register">
		<view class="register_title">
			<text>找回密码</text>
		</view>
		<view class="register_user" :class="psdFocus ?  'psdFocus' : ''">
			<input type="number" placeholder="手机号码" placeholder-style="color:rgb(173,185,193)" v-model="phone"
				@focus="onFocusName" @blur="onBlurName" />
		</view>
		<view class='register_code'>
			<input type="number" v-model="code" class='codeinput'  placeholder="请输入验证码"
				placeholder-style="color:rgb(173,185,193)">
			<view :class="disabled ? 'huoquzhong' : 'huoqu'" @click="get_code">{{ time }}{{ text }}</view>
		</view>
		<view class="register_pwd" :class="psdFocus ?  'psdFocus' : ''">
			<input type="text" :password="typePassWord" placeholder="输入新密码" hover-class="input-hover"
				placeholder-style="color:rgb(173,185,193)" v-model="password" @focus="onFocusPsd" @blur="onBlurPsd" />
			<view class="" >
				<u-icon size="18" name="eye-fill" @click="seePassWord(1)" style="margin-left: 10rpx;position: absolute;
    right: 56rpx;"></u-icon>
			</view>
		</view>
		<view class="register_btn">
			<button hover-class="btn_hover" @tap="register">重置密码</button>
		</view>
		<view class="register_back">
			<navigator url="../login/login" open-type="redirect" hover-class="navigator-hover">返回登录</navigator>
		</view>
	</view>
</template>

<script>
	import {
		sendCode,
		resetPassword
	} from '@/request/api.js'
	export default {
		data() {
			return {
				phone: "",
				password: "",
				psdFocus: '',
				nameFocus: '',
				codelogin: true,
				show: true,
				code:'',
				text: '获取验证码',
				time: '',
				disabled: false,
				typePassWord: true,
				rules: {
					password: {
						rule: /^[0-9a-zA-Z]{1,16}$/,
						msg: "密码应该为1-16位"
					},
					phone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					code: {
						rule: /^[0-9]{4}$/,
						msg: "请输入4位数字验证码"
					}
				},
			}
		},
		onLoad() {
			console.log('onLoad');
		},
		methods: {
			seePassWord(index) {
				switch (index) {
					case 0:
						this.typeOldPassWord = !this.typeOldPassWord
						break;
					case 1:
						this.typePassWord = !this.typePassWord
						break;
					case 2:
						this.typeAginPassword = !this.typeAginPassword
						break;
				}
			},
			//验证
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					//提示信息
					uni.showToast({
						title: this.rules[key].msg,
						icon: 'none'
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
			//获取验证码
			async get_code() {
				if (this.disabled) {
					return;
				}
				if (!this.validate('phone')) return;
				uni.showLoading({
					title: '发送中',
					mask: true
				});
				uni.request({
					url: `${getApp().globalData.baseUrl}/api/login/send`,
					data: {
						mobile: this.phone,
						event: 'resetpwd',
						type:1
					},
					method: 'post', //get、post、delete
					success: re => {
						setTimeout(function() {
							uni.hideLoading();
						}, 100);
						console.log(re)
						if (re.data.code == 200) {
							this.disabled = true;
							this.setInterValFunc(); //开启倒计时
						} else {
							uni.showToast({
								title: re.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			//倒计时
			setInterValFunc(e) {
				this.time = e || 60;
				this.text = '秒';
				this.setTime = setInterval(() => {
					if (this.time - 1 <= 0) {
						this.time = '';
						this.text = '重新获取';
						if (e) {
							this.text = '获取验证码';
						}
						this.code = '';
						this.disabled = false;
						clearInterval(this.setTime);
						if (uni.getStorageSync('userInfo')) {
							this.text = '获取验证码';
						}
					} else {
						this.time--;
					}
				}, 1000);
			},
			onFocusPsd() {
				this.psdFocus = 'psdFocus';
			},
			onBlurPsd() {
				this.psdFocus = '';
			},
			onFocusName() {
				this.nameFocus = 'nameFocus';
			},
			onBlurName() {
				this.nameFocus = '';
			},

			async register() {
				const that = this;
				if (that.phone == "") {
					uni.showToast({
						title:'请输入手机号',
						icon: 'none',
						duration: 1500
					})
					return;
				} else if (that.code == "") {
					uni.showToast({
						title:'请输入验证码',
						icon: 'none',
						duration: 1500
					})
					return;
				}else if (that.password == "") {
					uni.showToast({
						title:'请输入密码',
						icon: 'none',
						duration: 1500
					})
					return;
				}else {
					let form = {
						mobile:that.phone,
						password:that.password,
						code:that.code,
						type:1
					}
					let res = await resetPassword(form)
					uni.showToast({
						title:'修改密码成功',
						icon: 'none',
						duration: 1500
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},2000)
					// console.log(res)
				}
			}
		}
	}
</script>

<style>
	@import '../../common/css/pages/forgotPassWord.css';
</style>